<template>
  <div class="lotteryColorHeader">
    <div class="lotteryColorLine displayFlex relative"
         :class="{homeLotteryColorW: _Modulation.judgeHome($route.name) === 'home',lotteryColorW: _Modulation.judgeHome($route.name) === 'noHome'}">
      <div class="headerLogo">
        <router-link :to="{name: 'index'}">
          <img :src="headerLogo" alt="">
        </router-link>
      </div>

      <div class="lotteryHeaderRight">
        <div class="lotUserMidIn displayFlex">
          <ul class="otherFunction displayFlex">
            <li class="otherFunctionItem relative" v-for="(item,index) in headerRightData"
                :class="{'on': parseInt(item.n) === parseInt(headerItemId)}" @mouseover="headerNavMouse(item.n)"
                @mouseleave="headerNavMouseLeave(item.n)" v-if="item.isShow">
              <a href="javascript:void(0)" @click="rightNavigation(item.n,item)" :class="{hasArrow:item.n==0}">{{item.name}}<Icon type="ios-arrow-down" class="arrowDown" :class="{upArrow:(item.n==headerItemId)&&isNavUpPer}" v-if="item.n==0"></Icon></a>
            </li>
          </ul>
          <div class="userInfoBox displayFlex">
            <div class="userInfo relative displayFlex">
              <div class="userLogin" v-if="!headerLoginStatus">
                <section>
                  <router-link :to="{name: 'login', query: {stateId: 1}}">
                    登录
                  </router-link>
                </section>
                <section>
                  <router-link :to="{name: 'register', query: {stateId: 2}}">
                    注册
                  </router-link>
                </section>
              </div>
              <p class="userNameHead" v-if="headerLoginStatus">尊敬的用户,
                {{headerPersonal.username || ''}}</p>
              <div class="userInfoTitle relative" :class="{on:isUpPer}" v-if="headerLoginStatus" @mouseenter="openPersonal" @mouseleave="closePersonal">
                <router-link :to="{name: 'myLottery', query: {id: 0}}">
                  个人中心
                  <Icon type="ios-arrow-down" class="arrowDown" :class="{upArrow:isUpPer}"></Icon>
                </router-link>
              </div>
              <div class="userInfoContent" @mouseenter="openPersonal" @mouseleave="closePersonal">
                <div class="userMessage clearFiex">
                  <div class="userHead floatLeft">
                    <img :src="userLogo" alt="">
                  </div>
                  <div class="userContent floatLeft" v-if="headerPersonal">
                    <p>尊敬的用户，{{headerPersonal.username || ''}}</p>
                    <p>欢迎来到黑桃A彩票平台<span class="signOut" @click="signOut">注销</span></p>
                  </div>
                </div>
                <div class="userAmount clearFiex" v-if="headerPersonal">
                  <p>账户余额</p>
                  <p>{{headerPersonal.amount}}元</p>
                </div>
                <div class="userAmount clearFiex" v-if="fgGameStatus">
                  <p>电游余额</p>
                  <p>{{headerPersonal.fgAmount}}元</p>
                </div>
                <ul class="userLink">
                  <li class="linkItem clearFiex" v-for='linkItem in headerData'>
                    <router-link :to="{name:linkItem.leftRoute,query:linkItem.leftQuery}" tag='p'>
                      {{linkItem.leftName}}
                    </router-link>
                    <router-link :to="{name:linkItem.rightRoute,query:linkItem.rightQuery}" class="relative" tag='p'>
                      {{linkItem.rightName}}
                      <Icon type="ios-arrow-right" class="rightArrow"></Icon>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--彩票游戏-->
      <div class="lotteryListData lotteryGame scrollBar" @mouseover="headerNavMouse(0)" @mouseleave="headerNavMouseLeave(0)">
        <ul class="lotteryNavList displayFlex">
          <li class="lotteryFirstNav relative" v-for="firstNavItem in lotteryNavData">
            <div class="lotteryLogo floatLeft">
              <img :src="getLotteryIcon(firstNavItem.id)" alt="">
            </div>
            <div class="lotteryBox">
              <ul class="clearFiex">
                <li class="lotterySecondNav floatLeft" v-for="lot in firstNavItem.subKindList
" @click="comPlayEvent(_Modulation.judgeCode(lot.isDefault, lot.creditCode, lot.officialCode))">
                  {{lot.name}}
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <!--电子游戏-->
      <!--<div class="lotteryListData newGame scrollBar" @mouseover="headerNavMouse(7)" @mouseleave="headerNavMouseLeave(7)">
        &lt;!&ndash;<ul class="lotteryNavList displayFlex">
          <li class="lotteryFirstNav relative" v-for="firstNavItem in recreationNavData">
            <div class="lotteryBox">
              <ul class="clearFiex">
                <li  class="lotterySecondNav floatLeft"  v-for="recrItem in firstNavItem.subKindList" @click="comPlayEvent(_Modulation.judgeCode(recrItem.isDefault, recrItem.creditCode, recrItem.officialCode))">{{recrItem.name}}</li>
              </ul>
            </div>
          </li>
        </ul>&ndash;&gt;
       &lt;!&ndash; <ul class="recreationLot displayFlex">
          <li class="recrLotItem">
            <img :src="getLotteryIcon(2001)" alt="">
          </li>
          <li class="recrLotItem">
            <img :src="getLotteryIcon(2001)" alt="">
          </li>
        </ul>&ndash;&gt;
      </div>-->
    </div>
  </div>
</template>

<script>
  import './head.scss';
  import {mapState} from 'vuex';

  export default {
    data() {
      return {
        headerLogo: require('../../../assets/images/theColor/img/loginLogo.png'),
        headerData: [
          {
            leftName: "投注记录",
            leftRoute: 'bettingRecord',
            leftQuery: {id: 2},
            rightName: "投注",
            rightRoute: 'theColor',
            rightQuery: {id: 0}
          },
          {
            leftName: "充值记录",
            leftRoute: 'accountDetails',
            leftQuery: {perIndex: 3, actionType: 1},
            rightName: "充值",
            rightRoute: 'topUp',
            rightQuery: {id: 4}
          },
          {
            leftName: "提现记录",
            leftRoute: 'accountDetails',
            leftQuery: {perIndex: 3, actionType: 2},
            rightName: "提现",
            rightRoute: 'withdrawal',
            rightQuery: {id: 5}
          },
          {
            leftName: "帐变明细",
            leftRoute: 'accountDetails',
            leftQuery: {id: 3},
            rightName: "查看",
            rightRoute: 'accountDetails',
            rightQuery: {id: 3}
          },
        ],
        headerRightData: [
          {name: "彩票游戏", isShow: true, routerName: 'theColor', id: 0, n: 0},
          {name: "电子游戏", isShow: false, routerName: 'gameList', id: 0, n: 7},
          {name: "游戏记录", isShow: true, routerName: 'bettingRecord', id: 2, n: 1},
          {name: "系统公告", isShow: true, routerName: 'systemOf', id: -100, n: 2},
          {name: "优惠活动", isShow: true, routerName: 'activity', id: -100, n: 3},
          {name: "活动抽奖", isShow: false, routerName: 'luckDraw', id: -100, n: 6},
          {name: "帮助中心", isShow: true, routerName: 'help', id: -100, n: 4},
          {name: "手机购彩", isShow: true, routerName: 'mobileLottery', id: -100, n: 5},
        ],
        allNavData:{
          tradition:[],//传统彩票
          recreation:[],//娱乐彩票
        },//所有导航数据
        amountTrue: false,
        amountTrueText: '显示',
        headerPersonal: '', //最新的个人信息
        userLogo: require('../../../assets/images/personal/myLottery/userHeadDefault.png'), //用户头像
        isUpPer: false, //是否上拉个人中心
        isNavUpPer: false, //是否上拉导航
        headerItemId: "-1",
        headerLoginStatus: false, // 登录状态
        lotteryNavData: [],//传统彩票导航数据
        recreationNavData: [],//娱乐彩票导航数据
        routerName: '',//当前路由名
        fgGameSW:false,//电游开关
      }
    },
    computed: {
      ...mapState({
        loginStatus: state => state.mutations.loginStatus, //登录状态
        allLotteryListData: state => state.mutations.allLotteryListData, //登录状态
        userInfo: state => state.mutations.userInformation, //用户信息
        luckyStatus: state => state.mutations.luckyStatus, //抽奖开关
        fgGameStatus: state => state.mutations.fgGameStatus, //电游开关
      })
    },
    mounted() {
      this.isUpPer = false;
    },
    activated() {
      $('.lotteryGame').stop().hide();
      $('.newGame').stop().hide();
      this.initData();
      this.initUserInfo();
      this.routerName = this.$route.name || '';
      let hasUser = this.userInfo ? this.userInfo.memberInfo.username ? true : false : false;
      switch (this.routerName) {
        case "myLottery":
        case "userInfo":
        case "bettingRecord":
        case "accountDetails":
        case "topUp":
        case "withdrawal":
        case "agency":
        case "statement":
        case "index":
          this.theUserInForm();
          break;
        default:
          if (!hasUser) {
            this.theUserInForm();
          }
          break;
        }
    },
    deactivated() {
      let name = this.$route.name;
      if (this.routerName === 'luckDraw' && !(name === 'index' || name === 'theColor')) {
        this.theUserInForm();
      }
    },
    methods: {
      initData() {
        this.initLotteryList();
        this.initLuckyTitle();
        this.gameStatusInit();
      },
      openTitleNav(status,n) {
        this.headerRightData.forEach((v, i) => {
          if (v.n == n) {
            v.isShow = status ? true : false;
          }
        });
      },
      initUserInfo() {
        let d = parseInt(this.$route.query.n);
        let id = d || d === 0 ? d : -1;
        this.headerItemId = id;
        this._Util.setItem('NI', id);
        this.headerLoginStatus = this._Util.getItem('loginStatus');
        this.headerPersonal = this.userInfo.memberInfo || {};
        this.fgGameSW = this.userInfo.fgGameStatus=='1'?true:false;
        // this.$store.commit('FG_GAME_STATUS', this.fgGameSW);
//        this.$store.commit('FG_GAME_STATUS', true);
      },
      initLuckyTitle(){
        if(this.luckyStatus || this.userInfo.luckyStatus){
          if(this.luckyStatus){
            this.openTitleNav(true,6);
          }else{
            this.openTitleNav(false,6);
          }
        }else{
          this.getLuckyStatus();
        }
      },
      // header电子记录
      gameStatusInit() {
        if(parseInt(this.fgGameStatus)){
          this.openTitleNav(true,7);
        }else{
          this.openTitleNav(false,7);
        }
      },
      //获取抽奖开启状态
      getLuckyStatus() {
        let that = this;
        that._Util.post(that, that._Api.GET_LUCKY_SWITCH, {}, (data) => {
          that.$store.commit('LUCKY_STATUS', data.luckyDrawSwitch);
        }, '', '', true);
      },
      //导航鼠标经过事件
      headerNavMouse(index) {
        index = parseInt(index);
        this.isNavUpPer = true;
        if (index === 0) {
          this.headerItemId = index;
          $('.lotteryGame').stop().slideDown(300);
        } else {
          this.headerItemId = this.$route.query.n;
          $('.lotteryListData').stop().slideUp(300);
        }
      },
      //导航鼠标离开事件
      headerNavMouseLeave(index) {
        index = parseInt(index);
        this.isNavUpPer = false;
        if (index === 0) {
          this.headerItemId = this.$route.query.n;
          $('.lotteryListData').stop().slideUp(300);
        } else {
          this.headerItemId = this.$route.query.n;
        }
      },
      //购彩跳转
      comPlayEvent(code) {
        let that = this,
          lotNameUtils = that._Util.lotteryNameUtils(code);
        if (!that._Util.whetherLogin()) {
          that.$router.push({name: 'login'});
          return;
        }
        $('.lotteryListData').stop().slideUp(300);
        if(that._Format.determineColor(code).letter) {
          that.$router.push({name: "credit", query: {code: code, index: lotNameUtils.index, lotteryTrue: true}});
        }else if(that._Format.determineColor(code).officer) {
          that.$router.push({name: "official", query: {code: code, index: lotNameUtils.index, lotteryTrue: true}});
        }else{
          that.$router.push({name: that._Format.gameName(code), query: {code: code, index: lotNameUtils.index, lotteryTrue: true}});
        }
      },
      //获取导航icon
      getLotteryIcon(id) {
        let result = '';
        switch (id) {
          case 1:
            result = require('../../../assets/images/header/lotteryIcon/icon5.png');
            break;
          case 2:
            result = require('../../../assets/images/header/lotteryIcon/icon6.png');
            break;
          case 3:
            result = require('../../../assets/images/header/lotteryIcon/icon1.png');
            break;
          case 4:
            result = require('../../../assets/images/header/lotteryIcon/icon3.png');
            break;
          case 5:
            result = require('../../../assets/images/header/lotteryIcon/icon2.png');
            break;
          case 6:
            result = require('../../../assets/images/header/lotteryIcon/icon7.png');
            break;
          case 7:
            result = require('../../../assets/images/header/lotteryIcon/icon4.png');
            break;
          case 8:
            result = require('../../../assets/images/header/lotteryIcon/icon8.png');
            break;
          case 9:
            result = require('../../../assets/images/header/lotteryIcon/icon'+id+'.png');
            break;
          default:
            result = require('../../../assets/images/header/lotteryIcon/icon5.png');
        }
        return result;
      },
      initLotteryList(){
        this.lotteryNavData = this.allLotteryListData.tradition.length > 0 ? this.allLotteryListData.tradition : [];
        this.recreationNavData = this.allLotteryListData.recreation.length > 0 ? this.allLotteryListData.recreation : [];
        if(this.lotteryNavData.length<=0){
          this.getLotteryList();
        }
      },
      //获取彩种列表
      getLotteryList() {
        let that = this;
        // 彩种列表
        that._Util.post(that, that._Api.POST_LOTTERY_ALL_Kind_DATA, {}, (data) => {
          that.allNavData.tradition = data.tradition||[];
          that.allNavData.recreation = data.entertain || [];
          that.lotteryNavData = data.tradition || [];
          that.recreationNavData = data.entertain||[];
          that.$store.commit('ALL_LOTTERY_LIST_DATA',that.allNavData);
        }, '', '', true);
      },
      //个人中心状态切换
      openPersonal() {
        // this.isUpPer = !this.isUpPer;
        this.isUpPer = true;
        $('.userInfoContent').stop().slideDown(300);
      },
      closePersonal() {
        this.isUpPer = false;
        $('.userInfoContent').stop().slideUp(300);
      },
      accordingTo() {
        if (this.amountTrue) {
          this.amountTrue = false;
          this.amountTrueText = '显示';
        } else {
          this.amountTrue = true;
          this.amountTrueText = '隐藏';
        }
      },
      rightNavigation(index, data) {
        let that = this;
        index = parseInt(index);
        that.headerItemId = index;
        that._Util.setItem('NI', index);
        if (!that._Util.whetherLogin() && (index === 1 || index === 0)) {
          that.$router.push({name: 'login'});
          return;
        }
        that.$router.push({
          name: data.routerName,
          query: {id: data.id, n: data.n}
        });
      },
      personalUser(index) {
        index = parseInt(index);
        let indexPer = 0,
          indexName = '';
        switch (index) {
          case 0:
            indexPer = 7;
            indexName = 'topUp';
            break;
          case 1:
            indexPer = 8;
            indexName = 'withdrawal';
            break;
          case 2:
            indexPer = 0;
            indexName = 'myLottery';
            break;
          case 3:
            indexPer = 1;
            indexName = 'bettingRecord';
            break;
        }
        if (parseInt(index) === 4) {
          this.signOut();
        }
        {
          this.$router.push({name: indexName, query: {id: indexPer}})
        }
      },
      signOut() {
        let that = this;
        that._Util.post(that, that._Api.POST_USER_LOGOUT, {}, (data) => {
          that._Util.showAlert('退出成功');
          that.signOutInit();
        });
      },
      signOutInit() {
        let that = this;
        that.$store.state.mutations.loginStatus = false;
        that._Util.setItem('loginStatus', false);
        that.headerLoginStatus = that._Util.getItem('loginStatus');
        that.$router.push({name: 'index'});
      },
      //获取用户信息
      theUserInForm() {
        let that = this;
        if (!that.headerLoginStatus) return;
        that.headerItemId = that._Util.getItem('NI') || 0;
        that._Util.post(that, that._Api.POST_USER_MESSAGE, {}, (data) => {
          that.$store.commit('POST_USER_INFORMATION', data || {});
          that.$store.state.mutations.loginStatus = true;
        }, '', '', true,1);
      }
    },
    watch: {
      '$route.name'() {
        this.isUpPer = false;
        $('.userInfoContent').stop().slideUp();
      },
      '$route.query.n'(val) {
        this.headerItemId = val;
      },
      'allLotteryListData'() {
        this.initLotteryList();
      },
      'userInfo'() {
        this.initUserInfo();
      },
      'luckyStatus'(){
        this.initLuckyTitle();
      },
      'fgGameStatus'(){
        this.gameStatusInit();
      },
    }
  }
</script>

<style>
</style>
